<template>
    <div v-show="handleGroup" id="handle-group">
        <el-popover v-if="moreConfigs"
                    title=""
                    width="400"
                    popper-class="handle-group-popper"
                    placement="bottom-start"
                    trigger="click">
            <el-button slot="reference"
                       class="title-btn"
                       type="primary"
                       round
                       icon="el-icon-setting">
                配置
            </el-button>

            <dv-border-box-10 :color="defs.constants.dvBorderColor">
                <el-row>
                    <el-col :span="24">
                        <el-form>
                            <el-form-item label="">
                                <el-switch v-model="switchStatus"
                                           active-text="定时更新"
                                           @change="intervalStatusChange">
                                </el-switch>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <el-form ref="intervalForm"
                         v-if="switchStatus"
                         :model="intervalForm"
                         :rules="intervalFormRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="" prop="durationValue">
                                <el-input v-model="intervalForm.durationValue" placeholder="循环时长"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="" prop="durationRange">
                                <el-select v-model="intervalForm.durationRange"
                                           placeholder="单位">
                                    <el-option v-for="item in defs.constants.intervalDurationRange"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="6">
                            <el-form-item>
                                <div class="btn-group">
                                    <el-button type="primary"
                                               :loading="loading"
                                               @click="submitForm('intervalForm')">确定
                                    </el-button>
                                    <el-button :loading="loading"
                                               @click="resetForm('intervalForm')">重置
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </dv-border-box-10>
        </el-popover>
        <el-switch v-else
                   v-model="switchStatus"
                   active-text="定时更新"
                   @change="intervalStatusChange">
        </el-switch>
        <el-button v-if="!switchStatus"
                   class="title-btn"
                   type="primary"
                   icon="el-icon-refresh"
                   round
                   :loading="loading"
                   @click="toUpdate">手动更新
        </el-button>
    </div>
</template>

<script>

export default {
    data() {
        return {
            handleGroup: false,
            switchStatus: true,
            loading: false,
            moreConfigs: true,
            intervalForm: {
                durationValue: '',
                durationRange: '',
            },
            intervalFormRules: {
                durationValue: [
                    {
                        required: true, message: '请输入时长', trigger: ['blur', 'change'],
                    }
                ],
                durationRange: [
                    {
                        required: true, message: '请选择单位', trigger: ['blur', 'change'],
                    }
                ],
            },
        };
    },
    props: {
        enableInterval: {
            required: true,
            type: Boolean,
            default: true,
        },
    },
    components: {},
    mounted() {
        this.toggleHandleGroup();
    },
    methods: {
        toggleHandleGroup() {
            if (this.$route.name !== "index") {
                this.handleGroup = true;
            }
        },
        intervalStatusChange(data) {
            this.$emit('update:enableInterval', data);
        },
        toUpdate() {
            this.loading = true;
            this.$parent.$refs.chartIndex.setData(this);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let intervalDurConfig = this.selfUtils.calcIntervalDuration(this.intervalForm.durationValue, this.intervalForm.durationRange);
                    this.$emit('setIntervalDur', {
                        that: this,
                        intervalDurConfig: intervalDurConfig,
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {
        enableInterval: {
            handler(newV) {
                this.switchStatus = newV;
            },
            immediate: true,
            deep: true,
        }
    },
};
</script>

<style lang="scss" scoped>
#handle-group {
    height: 0.4rem;
    line-height: 0.4rem;
    padding: 0 0 0 0.1rem;

    > * {
        margin: 0 0.1rem 0 0;
    }

    ::v-deep .el-switch {
        height: 0.4rem;
        line-height: 0.4rem;
        vertical-align: top;

        .el-switch__label {
            height: 0.4rem;
            line-height: 0.4rem;
            color: #DCDFE6;
        }

        .el-switch__label.is-active {
            color: #409EFF;
        }
    }

    ::v-deep button.el-button.title-btn {
        padding: 0 0.15rem 0 0.1rem;
        height: 0.4rem;
        line-height: 0.4rem;
    }

}
</style>
<style lang="scss">
body {
    .el-popover.handle-group-popper {
        padding: 0;
        border: none;
        background-image: url("../assets/pageBg.jpg");
        background-size: cover;
        background-position: center center;

        div[class^=dv-border-box] {
            .border-box-content {
                padding: 0.2rem;

                .el-switch {
                    //height: 0.4rem;
                    //line-height: 0.4rem;
                    //vertical-align: top;

                    .el-switch__label {
                        color: #DCDFE6;
                    }

                    .el-switch__label.is-active {
                        color: #409EFF;
                    }
                }

                .el-input {
                    //width: 1.3rem;

                    .el-input__inner {
                        //height: 0.4rem;
                        //line-height: 0.4rem;
                        //padding: 0 0.1rem;
                        background-color: transparent;
                        color: #409EFF;
                    }
                }

                .el-select {
                    //width: 1.3rem;

                    .el-input {
                        .el-input__inner {
                            //height: 0.4rem;
                            //line-height: 0.4rem;
                            //padding: 0 0.5rem 0 0.1rem;
                            &::-moz-placeholder,
                            &:-moz-placeholder,
                            &:-ms-input-placeholder,
                            &::-webkit-input-placeholder {
                                color: #409EFF;
                            }
                        }

                        .el-input__suffix {
                            .el-input__suffix-inner {
                                .el-input__icon {
                                    //line-height: 0.4rem;
                                }
                            }
                        }
                    }
                }

                .btn-group {
                    position: relative;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -o-transform: translateX(-50%);
                    transform: translateX(-50%);
                    display: inline-block;
                }
            }
        }
    }
}
</style>